<template>
  <el-card style="max-width: 960px">
    <el-descriptions
        class="margin-top"
        title="个人信息"
        :column="2"
        size="large"
        border
    >
      <template #extra>
        <el-button type="primary" @click="updateDialogShow=true">编辑信息</el-button>
      </template>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon >
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        {{userInfo.username}}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><Money /></el-icon>
            用户余额
            <RouterLink to="/user/recharge" style="font-size: 12px;color: #AAAAAA;margin-left: 5px">去充值>></RouterLink>
          </div>
        </template>
        ￥{{ userInfo.money}}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><User /></el-icon>
            真实姓名
          </div>
        </template>
        {{ maskedRealName}}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><Female /></el-icon>
           /
            <el-icon><Male /></el-icon>
            性别
          </div>
        </template>
        {{ userInfo.sex}}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><Clock /></el-icon>
            注册时间
          </div>
        </template>
        {{ userInfo.regTime}}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><Phone /></el-icon>
            电话号
          </div>
        </template>
        {{ userInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><Message /></el-icon>
            邮箱
          </div>
        </template>
        {{ userInfo.email}}
      </el-descriptions-item >
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><Avatar /></el-icon>
            身份证号
          </div>
        </template>
        {{maskedIdNumber}}
      </el-descriptions-item>
      <el-descriptions-item  width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><CircleCheck /></el-icon>
            认证
          </div>
        </template>
        <el-tag type="success" v-if="updateInfo.status===1">已认证</el-tag>
        <div v-else><el-tag type="info" >未认证</el-tag>
        <el-button type="success" style="float: right;" @click="authentication=true">点击认证</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <!-- 修改模态框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改个人信息" width="500px">
    <el-form>
      <el-form-item label="电话号" label-width="20%">
        <el-input v-model="updateInfo.phone" autocomplete="off" placeholder="请输入电话号"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="updateInfo.email" autocomplete="off" placeholder="请输入邮箱号"/>
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-radio-group v-model="updateInfo.sex">
          <el-radio value="男" label="男" size="large"/>
          <el-radio value="女" label="女" size="large"/>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button  @click="flushed">取消</el-button>
        <el-button type="primary" @click="update"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改模态框结束 -->

  <!-- 认证开始 -->
  <el-dialog v-model="authentication" title="修改个人信息" width="500px">
    <el-form>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="certifying.realname" autocomplete="off" placeholder="请输入真实姓名"/>
      </el-form-item>
      <el-form-item label="身份证" label-width="20%">
        <el-input v-model="certifying.idCard" autocomplete="off" placeholder="请输入身份证"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button  @click="flushed">取消</el-button>
        <el-button type="primary" @click="certifyingId"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改模态框结束 -->

</template>



<script setup>
import {computed, ref} from 'vue'
import {
  User,
} from '@element-plus/icons-vue'
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
//修改的对话框
const updateDialogShow=ref(false);
//认证对话框
const authentication=ref(false);
//局部显示身份证号码
const maskedIdNumber = computed(() => {
  const idNumber = updateInfo.value.idCard;
  if (!idNumber) return '';
  return idNumber.slice(0, 3) + '****' + idNumber.slice(-4);
});
//局部显示真实姓名
const maskedRealName = computed(() => {
  const name = updateInfo.value.realname;
  if (!name) return '';
  const firstChar = name.charAt(0);
  const hiddenChars = '*'.repeat(name.length - 1);
  return firstChar + hiddenChars;
});
const certifying=ref({
  idCard:'',
  realname:''
})

const updateInfo=ref({
  username:'',
  realname:'',
  sex:'',
  idCard:'',
  phone:'',
  email:'',
  status:''
})
//身份认证
function certifyingId(){
  userApi.updateCertifying(certifying.value)
    .then(resp=>{
      if (resp.code==10000){
        ElMessage.success(resp.msg)
        authentication.value=false;
        getInfo()
      }else {
        ElMessage.error(resp.msg)
      }
    })
}



//取消后的刷新页面
function flushed(){
  getInfo();
  updateDialogShow.value=false;
  authentication.value=false;
}

function update(){
  userApi.update(updateInfo.value)
      .then(resp=>{
        if(resp.code==10000){
          ElMessage.success(resp.msg);
          //刷新页面
          getInfo();
          updateDialogShow.value=false;
        }else {
          ElMessage.error(resp.msg)
        }

      })

}

//用户信息
const userInfo=ref({});
function getInfo(){
  userApi.getInfo()
      .then(resp=>{
        userInfo.value=resp.data
        updateInfo.value=resp.data
      })
}
getInfo();

</script>
<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>